<template>
	<div>
		<Row style="text-align: left;margin-top: 41px;">
			<Col span="12" style="text-align: left;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">分层管理</span>
			</Col>
		</Row>
		<Row style="margin-top: 20px;margin-bottom:20px;text-align: left;padding: 0px 40px 0px 45px;">
			<Col span="6">
			<span>年&nbsp;&nbsp;&nbsp;&nbsp;级：</span>
			<Select v-model="fencengSelect" @on-change="fencengselectChange" style="width: 150px;text-align: center;">
				<Option v-for="item in fencengList" :value="item.value" :key="item.value">{{item.label}}</Option>
			</Select>
			</Col>
			<Button style="margin-left: 10px; float: right;background-color: orange;color: white;font-size: 14px;" @click="addfencengclass">+&nbsp;新增分层班级组</Button>
			<Button style="float: right;" icon="iconfont alicon-daoru" type="ghost" @click="getdownload">
					<!--:loading="loading"-->
					<span ></span>
			        <span >批量导入</span>
<!--			        v-if="!loading"-->
			        <!--<span v-else>加载中</span>-->
			    </Button>

		</Row>
		<div v-for="(item,index) in subjectList" @mouseover="mouseOver(index)" @mouseout="mouseOut(index)" :key="item.subjectid" style="float: left; display: inline-block;width: 18%;margin: 10px 1%;height: 200px;border: 1px #e4e5e7 solid;">
			<div style="display: block;" @click="detail(item.subjectid,item.subject,item.progress,item.starttime,item.endtime,item.year,item.grade,item.showsmall,item.school)">
				<img style="height: 150px;width: 100%;display: block;" :src="item.imgurl">
			</div>
			<div style="height: 50px;width: 100%;display: block;">
				<div style="padding: 5px;height: 30px;display: block;">
					<span style="float: left;height: 20px;line-height: 20px;">{{item.grade}}年级·{{item.subject}}</span>
					<div style="float: right;border: 1px solid #57A3F3;height: 18px;border-radius: 5px;"><span style="margin: 0 2px;">{{item.school}}</span></div>
				</div>
				<div style="height: 20px;width: 100%;display: block;padding: 0 5px;">
					<span style="float: left;margin-left: 2px;text-align: left;" :class="item.progress=='0%'?'red':'gray'">班级：{{item.belongclass}}</span>
				</div>
			</div>
			<div style="float: right;position: relative;top: -187px;right: 10px;" v-if="item.showsmall==true?true:false">
				<div style="display: inline-block; background-color: #000000; opacity: 0.3;border-radius:6px;">
					<i class="iconfont alicon-edit" @click="gotoedit(index)"  style="z-index: 1000;color: white;margin: 5px;"></i>
				</div>
				<div style="display: inline-block; background-color: #000000; opacity: 0.3;border-radius:6px;">
					<i class="iconfont alicon-delete" @click="gotodel(index)" style="z-index: 1000;color: white;margin: 5px;"></i>
				</div>
			</div>
		</div>
		<div v-if="sortSettingHidden" span="10" style=" width: 600px; z-index: 1000;background-color: white;margin:0 auto;position: absolute;top: 200px;left: 0;right: 0;text-align: left;height:500px;border: 1px solid #e9eaec;padding: 50px;border-radius: 15px;">
			<Row style="width: 100%;text-align: center;margin-bottom: 20px;">
				<span style="margin-bottom: 20px;font-size: 21px;">{{title}}</span>
			</Row>
			<Row style="font-size: 15px;">
				<Col style="text-align: center;padding: 10px;">
				<span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;级:</span>
				<Select v-model="addgrade" @on-change="addgradeChange" style="text-align: center; width: 65%;position: relative;">
					<Option v-for="item in addgradeList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Col style="text-align: center;padding: 10px;">
				<span>入学年份:</span>
				<Select v-model="addyear" @on-change="addyearChange" style="text-align: center; width: 65%;position: relative;">
					<Option v-for="item in addyearList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
				<Row>
					<Col style="text-align: center;padding: 10px;width: 100%;">
					<span>科&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;目:</span>
					<Select v-model="addsubject" @on-change="addsubjectChange" style="text-align: center; width: 65%;position: relative;">
						<Option v-for="(item,index) in addsubjectList" :value="item.label" :key="item.label">{{item.label}}</Option>
					</Select>
					</Col>
				</Row>
				<Row>
					<Col style="text-align: center;padding: 10px;">
					<span>所属班级:</span>
					<CheckboxGroup v-model="xkpkcheckbox" @on-change="xkpkcheckboxselect" style="display: inline-block;font-size: 24px;">
					<Checkbox v-for="item in xkpkcheckboxList" :key="item.label" :label="item.label" style="display: inline-block;font-size: 14px;margin: 0 10px;">{{item.label}}</Checkbox>
				</CheckboxGroup>
					</Col>
				</Row>
				<Col style="text-align: center;padding: 10px;">
				<span>校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区:</span>
				<Select v-model="addschool" @on-change="addschoolChange" style="text-align: center; width: 65%;position: relative;">
					<Option v-for="item in addschoolList" :value="item.label" :key="item.label">{{item.label}}</Option>
				</Select>
				</Col>
			</Row>
			<Row style="text-align: center;">
				<Col span="24" style="margin-top:15px">
				<Button type="ghost" @click="cancel" icon="close-round" style="margin-right: 20px;">取消</Button>
				<Button v-if="this.title=='新增分层班级组'?true:false" type="primary" @click="savesort" icon="checkmark-round">保存</Button>
				<Button v-if="this.title=='编辑分层班级组'?true:false" type="primary" @click="editsavesort" icon="checkmark-round">保存</Button>
				</Col>
			</Row>
		</div>
	</div>
</template>

<script>
	import { setlocalstorage, setsessionstorage, removesessionstorage, removelocalstorage } from "@/components/js/Localstorage.js"
	export default {
		data() {
			return {
				title:"",
				obj:"",
				listImgurl:"",
				belongclass:[],
				addyear:"",
				addschool:"",
				xkpkcheckbox:"",
				addgrade: "",
				addsubject: "",
				sortSettingHidden: false,
				fencengSelect: 4,
				addschoolList:[
				{
					value:1,
					label:"本校区",
				},
				{
					value:2,
					label:"其他校区",
				},
				],
				xkpkcheckboxList:[
				{
					value:1,
					label:"1班",
				},
				{
					value:2,
					label:"2班",
				},
				{
					value:3,
					label:"3班",
				},
				{
					value:4,
					label:"4班",
				},
				],
				addyearList:[
				{
					value:1,
					label:"2016届",
				},
				{
					value:2,
					label:"2017届",
				},
				{
					value:3,
					label:"2018届",
				},
				{
					value:4,
					label:"2019届",
				},
				],
				addsubjectList: [{
						value: 1,
						label: "物理",
					},
					{
						value: 2,
						label: "化学",
					},
					{
						value: 3,
						label: "生物",
					},
					{
						value: 4,
						label: "政治",
					},
					{
						value: 5,
						label: "历史",
					},
					{
						value: 6,
						label: "地理",
					},
					{
						value: 7,
						label: "语文",
					},
					{
						value: 8,
						label: "数学",
					},
					{
						value: 9,
						label: "英语",
					},
				],
				addgradeList: [{
						value: 1,
						label: "高一",
					},
					{
						value: 2,
						label: "高二",
					},
					{
						value: 3,
						label: "高三",
					},
				],
				fencengList: [{
						value: 4,
						label: "全部"
					},
					{
						value: 5,
						label: "高一"
					},
					{
						value: 6,
						label: "高二"
					},
					{
						value: 7,
						label: "高三"
					},
				],
				subjectList: [{
						subjectid: "1",
						subject: "语文",
						year: "2017届",
						grade: "高二",
						belongclass: ["1班","2班","3班","4班"],
						school: "本校区",
						showsmall: false,
						imgurl: require('../../../assets/2017-5.png'),
					},
					{
						subjectid: "2",
						subject: "数学",
						year: "2016届",
						grade: "高三",
						belongclass: ["1班","2班","3班","4班"],
						school: "本校区",
						showsmall: false,
						imgurl: require('../../../assets/2016-6.png'),
					},
					{
						subjectid: "3",
						subject: "英语",
						year: "2016届",
						grade: "高三",
						belongclass: ["1班","2班","3班","4班"],
						school: "本校区",
						showsmall: false,
						imgurl: require('../../../assets/2016-6.png'),
					},
					{
						subjectid: "4",
						subject: "物理",
						year: "2018届",
						grade: "高一",
						belongclass: ["1班","2班","3班","4班"],
						school: "本校区",
						showsmall: false,
						imgurl: require('../../../assets/2018-4.png'),
					},
					{
						subjectid: "5",
						subject: "化学",
						year: "2018届",
						grade: "高一",
						belongclass: ["1班","2班","3班","4班"],
						school: "本校区",
						showsmall: false,
						imgurl: require('../../../assets/2018-4.png'),
					},
					{
						subjectid: "6",
						subject: "生物",
						year: "2017届",
						grade: "高二",
						belongclass: ["1班","2班","3班","4班"],
						school: "本校区",
						showsmall: false,
						imgurl: require('../../../assets/2017-5.png'),
					},
					{
						subjectid: "7",
						subject: "政治",
						year: "2016届",
						grade: "高三",
						belongclass: ["1班","2班","3班","4班"],
						school: "本校区",
						showsmall: false,
						imgurl: require('../../../assets/2016-6.png'),
					},
					{
						subjectid: "8",
						subject: "历史",
						year: "2016届",
						grade: "高三",
						belongclass: ["1班","2班","3班","4班"],
						school: "本校区",
						showsmall: false,
						imgurl: require('../../../assets/2016-6.png'),
					},
					{
						subjectid: "9",
						subject: "地理",
						year: "2018届",
						grade: "高一",
						belongclass: ["1班","2班","3班","4班"],
						school: "本校区",
						showsmall: false,
						imgurl: require('../../../assets/2018-4.png'),
					},

				],
			}
		},
		methods: {
			fencengselectChange: function() {},
			getdownload: function() {},
			addfencengclass: function() {
				this.sortSettingHidden = true
				this.title="新增分层班级组"
				this.xkpkcheckbox=["1班"]
				this.addyear="2016届"
				this.addgrade="高一"
				this.addsubject="物理"
				this.addschool="本校区"
			},
			savesort: function() {
					this.subjectList.push({
						subjectid	: '0' + (this.subjectList.length + 1),
						subject: this.addsubject,
						grade:this.addgrade,
						year:this.addyear,
						belongclass: this.xkpkcheckbox,
						sort: this.addsort,
						school:this.addschool,
						showsmall:false,
					})
					this.sortSettingHidden = false
					alert('保存成功')
				
			},
			gotoedit:function(index){
				this.title="编辑分层班级组"
				this.sortSettingHidden=true
				this.obj=index
				this.listImgurl=this.subjectList[index].imgurl
				this.xkpkcheckbox=this.subjectList[index].belongclass
				this.addyear=this.subjectList[index].year
				this.addgrade=this.subjectList[index].grade
				this.addsubject=this.subjectList[index].subject
				this.addschool=this.subjectList[index].school
			},
			detail: function(subjectid, subject, progress, starttime, endtime, year, grade, showsmall, school) {
				setsessionstorage('xkpksubjectid', subjectid);
				setsessionstorage('xkpksubject', subject);
				setsessionstorage('xkpkprogress', progress);
				setsessionstorage('xkpkstarttime', starttime);
				setsessionstorage('xkpkendtime', endtime);
				setsessionstorage('xkpkyear', year);
				setsessionstorage('xkpkgrade', grade);
				setsessionstorage('xkpkshowsmall', showsmall);
				setsessionstorage('xkpkschool', school);
				this.$router.push({
					name: 'laminationManagementdetail'
				})
			},
			editsavesort:function(){
				this.subjectList.splice(this.obj,1,{
						imgurl:this.listImgurl,
				belongclass:this.xkpkcheckbox,
				year:this.addyear,
				grade:this.addgrade,
				subject:this.addsubject,
				school:this.addschool,
						showsmall: false,
					})
				this.sortSettingHidden=false
				alert('保存成功')
			},
			gotodel: function(index) {
				this.subjectList.splice(index, 1)
			},
			mouseOver: function(index) {
				this.subjectList[index].showsmall = true
			},
			mouseOut: function(index) {
				this.subjectList[index].showsmall = false
			},
			cancel: function() {
				this.sortSettingHidden = false
			},
			addgradeChange:function(){},
			addsubjectChange:function(){},
			xkpkcheckboxselect:function(){},
			addschoolChange:function(){},
			addyearChange:function(){},
		},
	}
</script>

<style>

</style>